<template>
  <div class="Container">
    <!-- 这是头像盒子 -->
    <div class="Ava">
      <a-avatar class="Avatar" v-model:src="url" />
    </div>
    <!-- 这是表单盒子 -->
    <div class="From">
      <a-form
        :model="formState"
        v-bind="layout"
        name="nest-messages"
        @finish="onFinish"
      >
        <a-form-item :name="['user', 'username']" label="UserName">
          <a-input v-model:value="username" :disabled="true" />
        </a-form-item>
        <a-form-item :name="['user', 'nickname']" label="Nickname">
          <a-input v-model:value="formState.user.nickname" />
        </a-form-item>
        <a-form-item :name="['user', 'telephone']" label="Telephone">
          <a-input v-model:value="formState.user.telephone" />
        </a-form-item>
        <a-form-item :name="['user', 'email']" label="Email">
          <a-input v-model:value="formState.user.email" />
        </a-form-item>
        <a-form-item :name="['user', 'wexin']" label="Weixin">
          <a-input v-model:value="formState.user.weixin" />
        </a-form-item>
        <a-form-item :name="['user', 'qq']" label="QQ">
          <a-input v-model:value="formState.user.qq" />
        </a-form-item>

        <a-form-item :wrapper-col="{ ...layout.wrapperCol, offset: 8 }">
          <a-button type="primary" html-type="submit">Submit</a-button>
          <a-button type="primary" @click="onReset" class="onReset"
            >onReset</a-button
          >
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script setup>
import { reactive } from "vue";
import axios from "axios";
// import Avatar from "./Avatar.vue";
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};

// 定义一个变量用来接收用户id和姓名
let id = "";
let username = "";

//图片的地址
let url = "../../imgs/下载.jpg";
//定义一个变量用来接收表单的数据
const formState = reactive({
  user: {
    nickname: "",
    telephone: "",
    email: "",
    weixin: "",
    qq: "",
  },
});

//获取当前用户的Token
var token = localStorage.getItem("token");
// 通过token获取当前user的信息
axios
  .get(`http://localhost:5133/api/tokenUserInfo?token=${token}`)
  .then((res) => {
    //接收参数，创建一个用户对象
    formState.user = {
      nickname: res.data.data.nickname,
      telephone: res.data.data.telephone,
      email: res.data.data.email,
      weixin: res.data.data.weixin,
      qq: res.data.data.qq,
    };
    id = res.data.data.id;
    username = res.data.data.username;
  });

//点击提交触发修改请求
const onFinish = (values) => {
  console.log("Success:", values);
  console.log(id);
  axios
    .put(`http://localhost:5133/api/UpdateUser/${id}`, formState.user)
    .then((res) => {
      // console.log(res.data);
    });
  console.log("表单里的内容");
  console.log(formState.user);
};

//点击重置
const onReset = (e) => {
  e.preventDefault();
  formState.user = {
    nickname: "",
    avatar: "",
    telephone: "",
    email: "",
    weixin: "",
    qq: "",
  };
};
</script>
<style scoped>
.Container {
  width: 100%;
  height: 67vh;
  position: relative;
}

.From {
  width: 50%;
  position: absolute;
  display: inline-block;
  left: 40%;
  top: 4%;
}
.From [label] {
  left: 45%;
}

input[type="text"] {
  width: 230px;
}
.onReset {
  margin-left: 4.5rem;
}

.Ava {
  width: 181.5px;
  height: auto;
  padding: 0;
  margin-left: 12%;
  margin-top: 2%;
}
</style>
